{% extends '../layouts/layout.html' %}

{% block scripts %}
<script src="http://w.sharethis.com/button/buttons.js"></script>
<script src="/js/topic/show.min.js"></script>
{% endblock %}

{% block content %}
<div class="forum-nav">
  <h2 class="forum-title">
    <a class="forum-title-link" href="/forum/{{ forum.permalink }}">&laquo; 回到「{{ forum.title }}」討論區</a>
  </h2>
</div>

<section class="alignright">
  <nav>
    <span class="st_twitter_large" displayText="Tweet"></span>
    <span class="st_facebook_large" displayText="Facebook"></span>
    <span class="st_ybuzz_large" displayText="Yahoo! Buzz"></span>
    <span class="st_gbuzz_large" displayText="Google Buzz"></span>
    <span class="st_email_large" displayText="Email"></span>
    <span class="st_sharethis_large" displayText="ShareThis"></span>
  </nav>
</section>

<section class="topic-container">
  <header class="topic-title">
    主題: {{ topic.title }}
  </header>
  <article class="topic-content">
    <section class="topic-article">
      <div class="topic-body">{{ topic.description|bbcode_content|linebreaks }}</div>
      <div class="topic-meta">
        於 {{ topic.created|twtz|date:"M j, Y g:i A (T)" }}  發表 |
        共有 <span id="topic-replies-count">{{ topic.replies_count }}</span> 個回覆
      </div>
    </section>
    <aside class="topic-userbox">
      <img src="{{ topic.author.thumbnail_url }}" alt="{{ topic.author.display_name }}" width="48" height="48">
      <br>
      <a href="/u/{{ topic.author.display_name }}">{{ topic.author.display_name }}</a>
    </aside>
    <div class="clear"></div>
  </article>
  
  <section class="topic-replies">
    {% for r in replies %}
    <article class="topic-reply-item" id="reply-{{ r.floor }}">
      <section class="topic-article">
        <div class="topic-body">
          <div class="reply-floor alignright"><a href="#reply-{{ r.floor }}">#{{ r.floor }}</a></div>
          {{ r.content|bbcode_content|linebreaks }}
        </div>
        <div class="topic-meta">
          於 {{ r.replied|twtz|date:"M j, Y g:i A (T)" }} 發表
        </div>
      </section>
      <aside class="topic-userbox">
        <img src="{{ r.author.thumbnail_url }}" alt="{{ r.author.display_name }}" width="48" height="48">
        <br>
        <a href="/u/{{ r.author.display_name }}">{{ r.author.display_name }}</a>
      </aside>
      <div class="clear"></div>
    </article>
    {% endfor %}
  
    {% if member %}
    <article class="topic-reply-item">
      <section class="topic-article">
        <div class="topic-body">
          <span class="text-hint">可以使用 <a href="/bbcode.html" target="_blank">BBCode [?]</a> 格式化內文</span><br>
          <textarea id="reply-desc" rows="5" cols="50"></textarea>
          <p>
            <button id="reply-button">回覆</button>
          </p>
        </div>
      </section>
      <aside class="topic-userbox">
        <img src="{{ member.thumbnail_url }}" alt="" width="48" height="48">
        <br>
        {{ member.display_name }}
      </aside>
      <div class="clear"></div>
    </article>
    {% else %}
    <div class="topic-reply-item">
      <p>請先登入再回覆</p>
    </div>
    {% endif %}
  </section>  <!-- .topic-replies -->
</section>
<input type="hidden" id="forum_key" value="{{ forum.key }}">
<input type="hidden" id="topic_id" value="{{ topic.serial }}">
<input type="hidden" id="member_name" value="{{ member.display_name }}">
{% endblock %}